<template>
  <div class="salesAnalysis">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24">
        <a-card class="box-card">
          <div slot="title">
            <span>门店支付金额占比</span>
          </div>
          <div>
            <DiskChart
              class="goods"
              :dataList="loadData2"
              :dataValue="loadDataValue2"
              :totalSales="totalSales2"
              width="100%"
              height="600px"
              v-if="show2"
            />
          </div>
        </a-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <a-card class="box-card">
          <div slot="title">
            <span>门店支付金额</span>
          </div>
          <div>
            <a-table rowKey="id" :columns="tableOption1" :dataSource="loadData1" :pagination="false" :loading="loading1"
              ><template slot-scope="text, record, index" slot="indexLabel">
                <span>{{ index + 1 }}</span>
              </template></a-table
            >
          </div>
        </a-card>
      </el-col>

      <el-col :xs="24" :sm="12">
        <a-card class="box-card">
          <div slot="title">
            <span>门店销量榜</span>
          </div>
          <div>
            <a-table
              rowKey="id"
              :columns="tableOption3"
              :dataSource="loadData3"
              :pagination="false"
              :loading="loading1"
            >
              <template slot-scope="text, record, index" slot="indexLabel">
                <span>{{ index + 1 }}</span>
              </template>
            </a-table>
          </div>
        </a-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <a-card class="box-card">
          <div slot="title">
            <span>门店营收榜</span>
          </div>
          <div>
            <a-table rowKey="id" :columns="tableOption4" :dataSource="loadData4" :pagination="false" :loading="loading1"
              ><template slot-scope="text, record, index" slot="indexLabel">
                <span>{{ index + 1 }}</span>
              </template></a-table
            >
          </div>
        </a-card>
      </el-col>
    </el-row>

    <a-card title="储值卡数据">
      <a-button slot="extra" type="link" @click="view">查看明细></a-button>
      <el-col :xs="24" :sm="12">
        <a-card title="充值概况" class="box-card">
          <div>
            <DiskChart
              class="goods"
              :dataList="loadData5"
              :dataValue="loadDataValue5"
              :totalSales="totalSales5"
              width="100%"
              height="400px"
              v-if="show5"
            />
          </div>
        </a-card>
      </el-col>

      <el-col :xs="24" :sm="12">
        <a-card title="消费概况" style="margin-left: 8px" class="box-card">
          <div>
            <DiskChart
              class="goods"
              :dataList="loadData6"
              :dataValue="loadDataValue6"
              :totalSales="totalSales6"
              width="100%"
              height="400px"
              v-if="show6"
            />
          </div>
        </a-card>
      </el-col>
    </a-card>

    <a-modal title="查看明细" v-model="dialogTableVisible" width="90%">
      <a-table :data-source="gridData" bordered :pagination="false" style="height: 600px; overflow-y: auto">
        <a-table-column data-index="shopName" title="门店名称" align="center"></a-table-column>
        <a-table-column-group title="充值" align="center">
          <a-table-column data-index="platC" title="通用" align="center"></a-table-column>
          <a-table-column data-index="mallC" title="商超" align="center"></a-table-column>
          <a-table-column data-index="launC" title="洗衣" align="center"></a-table-column>
          <a-table-column data-index="houseC" title="家政" align="center"></a-table-column>
          <a-table-column data-index="coffeeC" title="咖吧" align="center"></a-table-column>
        </a-table-column-group>
        <a-table-column-group title="消费" align="center">
          <a-table-column data-index="scoffeeC" title="通用" align="center"></a-table-column>
          <a-table-column data-index="smallC" title="商超" align="center"></a-table-column>
          <a-table-column data-index="slaunC" title="洗衣" align="center"></a-table-column>
          <a-table-column data-index="shouseC" title="家政" align="center"></a-table-column>
          <a-table-column data-index="splatC" title="咖吧" align="center"></a-table-column>
        </a-table-column-group>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import DiskChart from '@/components/Charts/DiskChart.vue'
import { tableOption1, tableOption3, tableOption4 } from './index.config.js'
import {
  dataCenterShopReport,
  dataStatisticalPayDetail,
  dataStatisticalConsumeDetail,
  dataStatisticalRechargeDetail,
} from '@/api/shop/dataReport/storeData.js'

export default {
  components: {
    DiskChart,
  },
  data() {
    return {
      tableOption1,
      tableOption3,
      tableOption4,
      loadData1: [],
      loadData2: [],

      loadData3: [],
      loadData4: [],
      loadData5: [],
      loadData6: [],
      loading1: false,

      totalSales2: `${0}\n\n总占比`, //总销量.
      totalSales5: `${0}\n\n总销量`, //总销量.
      totalSales6: `${0}\n\n总销量`, //总销量.

      loadDataValue2: [],
      loadDataValue5: [],
      loadDataValue6: [],
      searchForm: {},

      gridData: [],
      dialogTableVisible: false,

      show2: false,
      show5: false,
      show6: false,
    }
  },
  methods: {
    getList(searchForm, page) {
      if (searchForm) {
        console.log(searchForm)
        this.searchForm = searchForm
      }
      this.loading1 = true
      this.show2 = false;
      dataCenterShopReport(Object.assign({ shopId: this.$store.getters.userInfoMessage.shopId }, this.searchForm)).then(
        (val) => {
          let data = val.data
          console.log(data)
          this.loading1 = false
          if (data.cateIdAmtList[0] != null ) {
            //储值
            this.loadData2 = []
            this.loadDataValue2 = []
            data.cateIdAmtList.forEach((item) => {
              this.loadData2.push(item.shopName)
              this.loadDataValue2.push({
                value: item.payAmtAcount,
                name: item.shopName,
              })
            })
            this.totalSales2 = `${data.totalAmt}\n\n总额`
            this.show2 = true
          } else {
            this.loadData2 = []
            this.loadDataValue2 = []
            this.totalSales2 = ''
            this.show2 = false
          }
          this.loadData1 = data.shopPayList[0] != null ?data.shopPayList:[]
          this.loadData3 = data.salesList[0] != null ?data.salesList:[]
          this.loadData4 = data.revenueList[0] != null ?data.revenueList:[]
        }
      )

      this.show5 = false
      dataStatisticalRechargeDetail(
        Object.assign({ shopId: this.$store.getters.userInfoMessage.shopId }, this.searchForm)
      ).then((val) => {
        //充值
        let data = val.data
        console.log('data', data)
        if (data) {
          this.loadData5 = []
          this.loadDataValue5 = []
          this.totalSales5 = `${data.total}\n\n总充值`
          delete data.total
          for (var k in data) {
            console.log(k)
            this.loadData5.push(this.name(k))
            this.loadDataValue5.push({
              value: data[k],
              name: this.name(k),
            })
          }
          this.show5 = true
        } else {
          this.show5 = false
        }
      })

      this.show6 = false
      dataStatisticalConsumeDetail(
        Object.assign({ shopId: this.$store.getters.userInfoMessage.shopId }, this.searchForm)
      ).then((val) => {
        //消费
        let data = val.data
        if (data) {
          this.loadData6 = []
          this.loadDataValue6 = []
          this.totalSales6 = `${data.total}\n\n总消费`
          delete data.total
          for (var k in data) {
            console.log(k)
            this.loadData6.push(this.name(k))
            this.loadDataValue6.push({
              value: data[k],
              name: this.name(k),
            })
          }
          this.show6 = true
        }else {
          this.show6 = false
        }
      })
    },
    view() {
      this.dialogTableVisible = true
      dataStatisticalPayDetail({
        shopId: this.$store.getters.userInfoMessage.shopId,
        beginTime: this.searchForm.beginTime,
        endTime: this.searchForm.endTime,
      }).then((val) => {
        let data = val.data
        this.gridData = data
        console.log(this.gridData)
      })
    },
    name(item) {
      let obj = ''
      if (item == 'launC') {
        obj = '洗衣'
      } else if (item == 'mallC') {
        obj = '商超'
      } else if (item == 'coffeeC') {
        obj = '咖吧'
      } else if (item == 'houseC') {
        obj = '家政'
      } else if (item == 'platC') {
        obj = '通用'
      }
      return obj
    },
  },
}
</script>
<style lang="less" scoped>
.salesAnalysis {
  .box-card {
    min-height: 500px;
  }
  .el-col {
    margin-bottom: 8px;
  }
}
</style>